<!--搜索结果组件-->
<template>
  <div class="main">
    <div v-for="article in articles" :key="article.id" class="result-box">
      <div class="search-result">
        <!-- 文章标题 -->
        <router-link :to="getArticleLink(article)">
          <h2>{{ article.title }}</h2>
        </router-link>

        <!-- 发布日期、修改日期、阅读次数 -->
        <span
          >发布日期: {{ formatDate(article.publish_date) }}&nbsp;&nbsp;</span
        >
        <span>修改日期: {{ formatDate(article.modify_date) }}&nbsp;&nbsp;</span>
        <span>阅读次数: {{ article.read_count }}</span>

        <!-- 文章前50个字 -->
        <!-- 提取文本内容 -->
        <p>{{ getShortenedText(article.content) }}</p>

        <!-- 文章网址 -->
        <a :href="getArticleUrl(article)" target="_blank">{{
          getArticleUrl(article)
        }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    articles: Array, // 使用 Array 类型的 props，表示 articles 是一个数组,接收父组件传来的参数
  },
  data() {
    return {};
  },

  computed: {
    ...mapState(["subColumns"]),
  },
  methods: {
    //得到文章链接
    getArticleUrl(article) {
      const path = this.getArticleLink(article);
      const domain = "https://cs.hbu.edu.cn";

      const fullUrl = `${domain}${path}`;

      return fullUrl;
    },
    //格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    //根据文章的子栏目id筛选出其所属子栏目
    findSubcolumnBySubcolumnId(subcolumnId) {
      // 使用 Array.find() 查找匹配的子栏目对象
      const foundSubcolumn = this.subColumns.find(
        (subcolumn) => subcolumn.subcolumn_id === subcolumnId
      );

      return foundSubcolumn; // 返回找到的子栏目对象，如果没有找到则返回 null
    },
    //动态构建文章路由
    getArticleLink(article) {
      const affiliatedSubColumn = this.findSubcolumnBySubcolumnId(
        article.subcolumn_id
      );

      if (affiliatedSubColumn) {
        if (affiliatedSubColumn.type === 1) {
          return affiliatedSubColumn.path;
        } else if (affiliatedSubColumn.type === 0) {
          return `${affiliatedSubColumn.path}/details/${article.article_id}`;
        }
      } else {
        return "/";
      }
    },
    removeHtmlTags(text) {
      // 使用正则表达式去掉HTML标记
      return text.replace(/<[^>]+>/g, "");
    },
    replaceHtmlEntities(text) {
      // 将HTML实体替换成空格
      return text.replace(/&[a-z]+;/g, ''); // 去除HTML实体字符
    },
    getShortenedText(text) {
      // 先去除HTML标记和替换HTML实体，然后截取前20个字符并添加省略号
      const plainText = this.replaceHtmlEntities(this.removeHtmlTags(text));
      return plainText.substring(0, 50) + "...";
    },
  },
};
</script>

<style scoped>
.result-box {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #337ab7;
  cursor: pointer;
}

.main {
  width: 1070px;
  height: auto;
  border: none;
}
</style>

